import NavLink from 'umi/navlink';
import React from 'react';
import styles from './sort.less';
import { ActivityIndicator } from 'antd-mobile';
export default class Sort extends React.Component {
  state = {
    theList: [],
    animating: true,
  };
  render() {
    return (
      <div className={styles.box}>
        {this.state.theList.map((item, index) => {
          return (
            <ul key={index} className={styles.sort}>
              <strong>{item.cate_name}</strong>
              <div className={styles.fa}>
                {item.tags.map((kid, index2) => {
                  return (
                    <NavLink
                      to={{
                        pathname: `/dynamic-sort/$song/${kid.tag_id}`,
                        state: { id: kid.tag_id },
                      }}
                      key={index2}
                      className={styles.kid}
                    >
                      {kid.tag_name}
                    </NavLink>
                  );
                })}
              </div>
            </ul>
          );
        })}
        <div className="toast-example">
          <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
        </div>
      </div>
    );
  }

  componentDidMount() {
    fetch('/api/client/tags.json')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({
          theList: data.items,
          animating:!this.state.animating
        });
      });
  }
}
